<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 头碎片-->
<head th:replace="fragment/Headfragment::Headfragment">
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

    <!-- Styles -->
    <link href="datamap/fontAwesome/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="datamap/css/lib/themify-icons.css" rel="stylesheet">
    <link href="datamap/css/lib/mmc-chat.css" rel="stylesheet" />
    <link href="datamap/css/lib/sidebar.css" rel="stylesheet">
    <link href="datamap/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="datamap/css/lib/nixon.css" rel="stylesheet">
    <link href="datamap/css/style.css" rel="stylesheet">

</head>
<body>
<div class="container-scroller">
    <!-- 页面头部碎片 -->
   <nav th:replace="fragment/CustomerPageHeadframent::CustomerPageHeadframent"></nav>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <!-- 侧边栏页面 -->
        <nav th:replace="fragment/CustomerPageSidebarfragment::CustomerPageSidebarfragment"></nav>
        <!-- partial -->
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="page-header">
                    <h3 class="page-title">
              <span class="page-title-icon bg-gradient-primary text-white mr-2">
                <i class="mdi mdi-home"></i>
              </span>
                        主页
                    </h3>
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item active" aria-current="page">
                                <span></span>Overview
                                <i class="mdi mdi-alert-circle-outline icon-sm text-primary align-middle"></i>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="col-12">
                    <div class="row">
                        <div class="col-md-4 stretch-card grid-margin">
                            <div class="card bg-gradient-danger card-img-holder text-white">
                                <div class="card-body">
                                    <img src="images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                                    <h4 class="font-weight-normal mb-3">当前在线客户
                                        <i class="mdi mdi-account mdi-24px float-right"></i>
                                    </h4>
                                    <h2 class="mb-5" th:text="${session.OnlineCustomerNum}"></h2>
                                    <h6 class="card-text" th:text="'客户总数：'+${session.CustomerNum}"></h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 stretch-card grid-margin">
                            <div class="card bg-gradient-info card-img-holder text-white">
                                <div class="card-body">
                                    <img src="images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                                    <h4 class="font-weight-normal mb-3">当前在线客服
                                        <i class="mdi mdi-account-multiple mdi-24px float-right"></i>
                                    </h4>
                                    <h2 class="mb-5" th:text="${session.OnlineCustomerServiceNum}"></h2>
                                    <h6 class="card-text" th:text="${'客服总数：'+session.CustomerServiceNum}"></h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 stretch-card grid-margin">
                            <div class="card bg-gradient-success card-img-holder text-white">
                                <div class="card-body">
                                    <img src="images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                                    <h4 class="font-weight-normal mb-3">共在线时间
                                        <i class="mdi mdi-bookmark-outline mdi-24px float-right"></i>
                                    </h4>
                                    <h2 th:text="${'您的客服:'+session.customerInfo1.getCustomerserviceid()}" class="mb-5"></h2>
                                    <h3  th:text="${'目前状态:'+session.customerInfo1.getRemark()}" class="font-weight-normal mb-3"></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-7 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <div class="clearfix">
                                    <h4 class="card-title float-left">Visit And Sales Statistics</h4>
                                    <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right"></div>
                                </div>
                                <canvas id="visit-sale-chart" class="mt-4"></canvas>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-5 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">客户来源</h4>
                                <canvas id="traffic-chart"></canvas>
                                <div id="traffic-chart-legend" class="rounded-legend legend-vertical legend-bottom-left pt-4"></div>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="row">
                    <div class="col-lg-12">
                        <div class="card alert">
                            <div class="header">
                                <h4>客户分布</h4>

                            </div>
                            <div class="datamap">
                                <div id="world-datamap"></div>
                            </div>
                        </div><!-- /# card -->
                    </div><!-- /# column -->
                </div>


            </div> <!-- main-panel ends -->
        </div>
        <!-- page-body-wrapper ends -->
    </div>
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="vendors/js/vendor.bundle.base.js"></script>
<script src="vendors/js/vendor.bundle.addons.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="js/off-canvas.js"></script>
<script src="js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="js/dashboard.js"></script>
<!-- End custom js for this page-->
<script th:inline="javascript">
    (function($) {
        'use strict';
        $(function() {
            Chart.defaults.global.legend.labels.usePointStyle = true;

            if ($("#serviceSaleProgress").length) {
                var bar = new ProgressBar.Circle(serviceSaleProgress, {
                    color: 'url(#gradient)',
                    // This has to be the same size as the maximum width to
                    // prevent clipping
                    strokeWidth: 8,
                    trailWidth: 8,
                    easing: 'easeInOut',
                    duration: 1400,
                    text: {
                        autoStyleContainer: false
                    },
                    from: { color: '#aaa', width: 6 },
                    to: { color: '#57c7d4', width: 6 }
                });

                bar.animate(.65);  // Number from 0.0 to 1.0
                bar.path.style.strokeLinecap = 'round';
                let linearGradient = '<defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"><stop offset="20%" stop-color="#da8cff"/><stop offset="50%" stop-color="#9a55ff"/></linearGradient></defs>';
                bar.svg.insertAdjacentHTML('afterBegin', linearGradient);
            }
            if ($("#productSaleProgress").length) {
                var bar = new ProgressBar.Circle(productSaleProgress, {
                    color: 'url(#productGradient)',
                    // This has to be the same size as the maximum width to
                    // prevent clipping
                    strokeWidth: 8,
                    trailWidth: 8,
                    easing: 'easeInOut',
                    duration: 1400,
                    text: {
                        autoStyleContainer: false
                    },
                    from: { color: '#aaa', width: 6 },
                    to: { color: '#57c7d4', width: 6 }
                });

                bar.animate(.6);  // Number from 0.0 to 1.0
                bar.path.style.strokeLinecap = 'round';
                let linearGradient = '<defs><linearGradient id="productGradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse"><stop offset="40%" stop-color="#36d7e8"/><stop offset="70%" stop-color="#b194fa"/></linearGradient></defs>';
                bar.svg.insertAdjacentHTML('afterBegin', linearGradient);
            }
            if ($("#points-chart").length) {
                var ctx = document.getElementById('points-chart').getContext("2d");

                var gradientStrokeViolet = ctx.createLinearGradient(0, 0, 0, 181);
                gradientStrokeViolet.addColorStop(0, 'rgba(218, 140, 255, 1)');
                gradientStrokeViolet.addColorStop(1, 'rgba(154, 85, 255, 1)');

                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [1, 2, 3, 4, 5, 6, 7, 8],
                        datasets: [
                            {
                                label: "North Zone",
                                borderColor: gradientStrokeViolet,
                                backgroundColor: gradientStrokeViolet,
                                hoverBackgroundColor: gradientStrokeViolet,
                                pointRadius: 0,
                                fill: false,
                                borderWidth: 1,
                                fill: 'origin',
                                data: [20, 40, 15, 35, 25, 50, 30, 20]
                            },
                            {
                                label: "South Zone",
                                borderColor: '#e9eaee',
                                backgroundColor: '#e9eaee',
                                hoverBackgroundColor: '#e9eaee',
                                pointRadius: 0,
                                fill: false,
                                borderWidth: 1,
                                fill: 'origin',
                                data: [40, 30, 20, 10, 50, 15, 35, 20]
                            }
                        ]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    display: false,
                                    min: 0,
                                    stepSize: 10
                                },
                                gridLines: {
                                    drawBorder: false,
                                    display: false
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display:false,
                                    drawBorder: false,
                                    color: 'rgba(0,0,0,1)',
                                    zeroLineColor: '#eeeeee'
                                },
                                ticks: {
                                    padding: 20,
                                    fontColor: "#9c9fa6",
                                    autoSkip: true,
                                },
                                barPercentage: 0.7
                            }]
                        }
                    },
                    elements: {
                        point: {
                            radius: 0
                        }
                    }
                })
            }
            if ($("#events-chart").length) {
                var ctx = document.getElementById('events-chart').getContext("2d");

                var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 181);
                gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
                gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');

                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [1, 2, 3, 4, 5, 6, 7, 8],
                        datasets: [
                            {
                                label: "Domestic",
                                borderColor: gradientStrokeBlue,
                                backgroundColor: gradientStrokeBlue,
                                hoverBackgroundColor: gradientStrokeBlue,
                                pointRadius: 0,
                                fill: false,
                                borderWidth: 1,
                                fill: 'origin',
                                data: [20, 40, 15, 35, 25, 50, 30, 20]
                            },
                            {
                                label: "International",
                                borderColor: '#e9eaee',
                                backgroundColor: '#e9eaee',
                                hoverBackgroundColor: '#e9eaee',
                                pointRadius: 0,
                                fill: false,
                                borderWidth: 1,
                                fill: 'origin',
                                data: [40, 30, 20, 10, 50, 15, 35, 20]
                            }
                        ]
                    },
                    options: {
                        legend: {
                            display: false
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    display: false,
                                    min: 0,
                                    stepSize: 10
                                },
                                gridLines: {
                                    drawBorder: false,
                                    display: false
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display:false,
                                    drawBorder: false,
                                    color: 'rgba(0,0,0,1)',
                                    zeroLineColor: '#eeeeee'
                                },
                                ticks: {
                                    padding: 20,
                                    fontColor: "#9c9fa6",
                                    autoSkip: true,
                                },
                                barPercentage: 0.7
                            }]
                        }
                    },
                    elements: {
                        point: {
                            radius: 0
                        }
                    }
                })
            }
            if ($("#visit-sale-chart").length) {
                Chart.defaults.global.legend.labels.usePointStyle = true;
                var ctx = document.getElementById('visit-sale-chart').getContext("2d");

                var gradientStrokeViolet = ctx.createLinearGradient(0, 0, 0, 181);
                gradientStrokeViolet.addColorStop(0, 'rgba(218, 140, 255, 1)');
                gradientStrokeViolet.addColorStop(1, 'rgba(154, 85, 255, 1)');
                var gradientLegendViolet = 'linear-gradient(to right, rgba(218, 140, 255, 1), rgba(154, 85, 255, 1))';

                var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 360);
                gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
                gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');
                var gradientLegendBlue = 'linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))';

                var gradientStrokeRed = ctx.createLinearGradient(0, 0, 0, 300);
                gradientStrokeRed.addColorStop(0, 'rgba(255, 191, 150, 1)');
                gradientStrokeRed.addColorStop(1, 'rgba(254, 112, 150, 1)');
                var gradientLegendRed = 'linear-gradient(to right, rgba(255, 191, 150, 1), rgba(254, 112, 150, 1))';

                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG'],
                        datasets: [
                            {
                                label: "CHN",
                                borderColor: gradientStrokeViolet,
                                backgroundColor: gradientStrokeViolet,
                                hoverBackgroundColor: gradientStrokeViolet,
                                legendColor: gradientLegendViolet,
                                pointRadius: 0,
                                fill: false,
                                borderWidth: 1,
                                fill: 'origin',
                                data: [20, 40, 15, 35, 25, 50, 30, 20]
                            },
                            {
                                label: "USA",
                                borderColor: gradientStrokeRed,
                                backgroundColor: gradientStrokeRed,
                                hoverBackgroundColor: gradientStrokeRed,
                                legendColor: gradientLegendRed,
                                pointRadius: 0,
                                fill: false,
                                borderWidth: 1,
                                fill: 'origin',
                                data: [40, 30, 20, 10, 50, 15, 35, 40]
                            },
                            {
                                label: "UK",
                                borderColor: gradientStrokeBlue,
                                backgroundColor: gradientStrokeBlue,
                                hoverBackgroundColor: gradientStrokeBlue,
                                legendColor: gradientLegendBlue,
                                pointRadius: 0,
                                fill: false,
                                borderWidth: 1,
                                fill: 'origin',
                                data: [70, 10, 30, 40, 25, 50, 15, 30]
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        legend: false,
                        legendCallback: function(chart) {
                            var text = [];
                            text.push('<ul>');
                            for (var i = 0; i < chart.data.datasets.length; i++) {
                                text.push('<li><span class="legend-dots" style="background:' +
                                    chart.data.datasets[i].legendColor +
                                    '"></span>');
                                if (chart.data.datasets[i].label) {
                                    text.push(chart.data.datasets[i].label);
                                }
                                text.push('</li>');
                            }
                            text.push('</ul>');
                            return text.join('');
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    display: false,
                                    min: 0,
                                    stepSize: 20,
                                    max: 80
                                },
                                gridLines: {
                                    drawBorder: false,
                                    color: 'rgba(235,237,242,1)',
                                    zeroLineColor: 'rgba(235,237,242,1)'
                                }
                            }],
                            xAxes: [{
                                gridLines: {
                                    display:false,
                                    drawBorder: false,
                                    color: 'rgba(0,0,0,1)',
                                    zeroLineColor: 'rgba(235,237,242,1)'
                                },
                                ticks: {
                                    padding: 20,
                                    fontColor: "#9c9fa6",
                                    autoSkip: true,
                                },
                                categoryPercentage: 0.5,
                                barPercentage: 0.5
                            }]
                        }
                    },
                    elements: {
                        point: {
                            radius: 0
                        }
                    }
                })
                $("#visit-sale-chart-legend").html(myChart.generateLegend());
            }
            if ($("#traffic-chart").length) {
                var gradientStrokeBlue = ctx.createLinearGradient(0, 0, 0, 181);
                gradientStrokeBlue.addColorStop(0, 'rgba(54, 215, 232, 1)');
                gradientStrokeBlue.addColorStop(1, 'rgba(177, 148, 250, 1)');
                var gradientLegendBlue = 'linear-gradient(to right, rgba(54, 215, 232, 1), rgba(177, 148, 250, 1))';

                var gradientStrokeRed = ctx.createLinearGradient(0, 0, 0, 50);
                gradientStrokeRed.addColorStop(0, 'rgba(255, 191, 150, 1)');
                gradientStrokeRed.addColorStop(1, 'rgba(254, 112, 150, 1)');
                var gradientLegendRed = 'linear-gradient(to right, rgba(255, 191, 150, 1), rgba(254, 112, 150, 1))';


                var i=[[${session.i}]];
                var j=[[${session.j}]];
                var sum = i+j;
                i=100*(i/sum);
                j=100*(j/sum);

                var trafficChartData = {
                    datasets: [{
                        data: [i,j],



                        backgroundColor: [
                            gradientStrokeBlue,
                            gradientStrokeRed
                        ],
                        hoverBackgroundColor: [
                            gradientStrokeBlue,
                            gradientStrokeRed
                        ],
                        borderColor: [
                            gradientStrokeBlue,
                            gradientStrokeRed
                        ],
                        legendColor: [
                            gradientLegendBlue,
                            gradientLegendRed
                        ]
                    }],

                    // These labels appear in the legend and in the tooltips when hovering different arcs
                    labels: [
                        '客服录入',
                        '网页介入',
                    ]
                };
                var trafficChartOptions = {
                    responsive: true,
                    animation: {
                        animateScale: true,
                        animateRotate: true
                    },
                    legend: false,
                    legendCallback: function(chart) {
                        var text = [];
                        text.push('<ul>');
                        for (var i = 0; i < trafficChartData.datasets[0].data.length; i++) {
                            text.push('<li><span class="legend-dots" style="background:' +
                                trafficChartData.datasets[0].legendColor[i] +
                                '"></span>');
                            if (trafficChartData.labels[i]) {
                                text.push(trafficChartData.labels[i]);
                            }
                            text.push('<span class="float-right">'+trafficChartData.datasets[0].data[i]+"%"+'</span>')
                            text.push('</li>');
                        }
                        text.push('</ul>');
                        return text.join('');
                    }
                };
                var trafficChartCanvas = $("#traffic-chart").get(0).getContext("2d");
                var trafficChart = new Chart(trafficChartCanvas, {
                    type: 'doughnut',
                    data: trafficChartData,
                    options: trafficChartOptions
                });
                $("#traffic-chart-legend").html(trafficChart.generateLegend());
            }

            if ($("#inline-datepicker").length) {
                $('#inline-datepicker').datepicker({
                    enableOnReadonly: true,
                    todayHighlight: true,
                });
            }
        });
    })(jQuery);
</script>

<!--<div th:replace="/fragment/datamapScriptFragment::datamapscrptfragment" ></div>-->
<script src="datamap/js/lib/jquery.min.js"></script><!-- jquery vendor -->
<script src="datamap/js/lib/jquery.nanoscroller.min.js"></script><!-- nano scroller -->
<script src="datamap/js/lib/sidebar.js"></script><!-- sidebar -->
<script src="datamap/js/lib/bootstrap.min.js"></script><!-- bootstrap -->
<script src="datamap/js/lib/mmc-common.js"></script>
<script src="datamap/js/lib/mmc-chat.js"></script>
<!--  Datamap -->
<script src="datamap/js/lib/datamap/d3.min.js"></script>
<script src="datamap/js/lib/datamap/topojson.js"></script>
<script src="datamap/js/lib/datamap/datamaps.world.min.js"></script>
<script src="datamap/js/lib/datamap/datamap-init.js"></script>
<!-- // Datamap -->
<script src="datamap/js/scripts.js"></script><!-- scripit init-->

<script th:inline="javascript">

    (function ($) {
        "use strict";

        var map = new Datamap({
            scope: 'world',
            element: document.getElementById('world-datamap'),
            responsive: true,
            geographyConfig: {
                popupOnHover: false,
                highlightOnHover: false,
                borderColor: 'rgb(48, 194, 208)',
                borderWidth: 2,
                highlightBorderWidth: 5,
                highlightFillColor: '#fff',
                highlightBorderColor: 'rgba(255,255,255,0.1)',
                borderWidth: 1,
            },
            bubblesConfig: {
                popupTemplate: function (geography, data) {
                    return '<div class="datamap-sales-hover-tooltip">' + data.country +'<span class="m-l-5"></span>'+ data.sold + '</div>'
                },
                borderWidth: 2,
                highlightBorderWidth: 5,
                highlightFillColor: '#fff',
                highlightBorderColor: 'rgba(255,255,255,0.1)',
                fillOpacity: 0.3
            },
            fills: {
                'Visited': 'rgb(0, 131, 143)',
                'neato': '#fff',
                'white': '#fff',
                defaultFill: 'rgb(25, 174, 188)'
            }
        });


        map.bubbles([
            {
                centered: 'CHN',
                fillKey: 'white',
                radius: 10,
                sold:'50人',
                country:'china'
            },
            {
                centered: 'SAU',
                fillKey: 'white',
                radius: 5,
                sold:'',
                country:'Saudia Arabia'
            },
            {
                centered: 'RUS',
                fillKey: 'white',
                radius: 5,
                sold:'5人',
                country:'Russia'
            },
            {
                centered: 'CAN',
                fillKey: 'white',
                radius: 5,
                sold:'1人',
                country:'Canada'
            },
            {
                centered: 'IND',
                fillKey: 'white',
                radius: 5,
                sold:'3人',
                country:'India'
            },
            {
                centered: 'AUS',
                fillKey: 'white',
                radius: 5,
                sold:'1人',
                country:'Australia'
            },
            {
                centered: 'BGD',
                fillKey: 'white',
                radius: 5,
                sold:'1人',
                country:'Bangladesh'
            }
        ])


        window.addEventListener('resize', function (event) {
            map.resize();
        });

    })(jQuery);
</script>

</body>

</html>
